<template>
  <!--  搜索栏-->
  <el-row style="margin-top: 20px">
    <el-col :span="24">
      <el-form :model="docQuery" inline>
        <el-form-item label="医生名称">
          <el-input v-model="docQuery.docName" clearable placeholder="请输入您要查询的医生名称"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="fetchDoc" icon="Search">搜索</el-button>
          <el-button type="warning" @click="resetting" icon="Refresh">重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
  <!--  工具栏-->
  <el-row :gutter="24" style="margin-top: 20px">
    <el-col :span="1.5">
      <el-button type="primary" @click="showInsertDialog" :icon="Plus">新增医生</el-button>
    </el-col>
    <el-col :span="1.5">
      <el-button type="warning" @click="updateCheck" :icon="Edit">编辑医生</el-button>
    </el-col>
    <el-col :span="1.5">
      <el-button type="danger" @click="removeCheck" :icon="Delete">删除医生</el-button>
    </el-col>
  </el-row>
  <!--  列表-->
  <el-row style="margin-top: 20px;height: 418px">
    <el-col :span="24">
      <el-table
          ref="docsTable"
          :data="docs"
          border
          :stripe="true"
          style="margin-top: 10px"
          height="350"
          v-show="docs.length != 0"
      >
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="docName" label="医生名称"/>
        <el-table-column prop="docUsername" label="医生登录名"/>
        <el-table-column prop="docTitle" label="医生职称"/>
        <el-table-column prop="deptName" label="部门名称"/>
        <el-table-column prop="docInt" label="医生简介"/>
        <el-table-column label="操作" min-width="100">
          <template #default="{row}">
            <el-button type="warning" :icon="Edit"  size="small" @click="showUpdateDialog(row)">编辑
            </el-button>
            <el-button type="danger" :icon="Delete"  size="small" @click="removeDoc(row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-empty
          v-show="docs.length == 0"
          image="https://xinghm-projectone-qd-task.oss-cn-shanghai.aliyuncs.com/exampledir/noData.jpg"
          :image-size="400">
        <el-button type="warning" @click="resetting">重置</el-button>
      </el-empty>
    </el-col>
  </el-row>
  <!-- 分页栏 -->
  <el-row style="margin-top: 20px" v-show="docs.length != 0">
    <!-- 监听页码的变化事件 -->
    <el-pagination @change="changePage" :total="total" background layout="prev, pager, next"/>
  </el-row>
  <!--  新增/编辑医生-->
  <el-dialog v-model="dialogFormVisible" :title="dialogTitle" width="700">
    <el-form :model="doc" label-width="auto">
      <el-form-item label="名称" required>
        <el-input v-model="doc.docName" clearable placeholder="请输入医生名称"/>
      </el-form-item>
      <el-form-item label="登录名" required>
        <el-input v-model="doc.docUsername" clearable placeholder="请输入医生登录名"/>
      </el-form-item>
      <el-form-item label="密码" required>
        <el-input type="password" v-model="doc.docPassword" clearable placeholder="请输入医生密码"/>
      </el-form-item>
      <el-form-item label="职称" required>
        <el-input v-model="doc.docTitle" clearable placeholder="请输入医生职称"/>
      </el-form-item>
      <el-form-item label="部门" required>
        <el-select
            v-model="doc.deptId"
            style="width: 150px"
        >
          <el-option
              v-for="option in depts"
              :key="option.deptId"
              :value="option.deptId"
              :label="option.deptName"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="简介" required>
        <el-input type="textarea" v-model="doc.docInt" clearable placeholder="请输入医生简介"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">关闭</el-button>
        <template v-if="isUpdate">
          <el-button type="primary" @click="updateDoc()">
            修改
          </el-button>
        </template>
        <template v-else>
          <el-button type="primary" @click="insertDoc()">
            新增
          </el-button>
        </template>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import jsCookie from "jscookie";
import {Delete, Edit, Key, Plus} from "@element-plus/icons-vue";
import {ElMessageBox, ElNotification} from "element-plus";
import {addDoc, fetchDocList, removeDoc, renewDoc} from "@/api/doc.js";
import {fetchDepartmentList} from "@/api/dept.js";

export default {
  name: "docManage",
  computed: {
    Delete() {
      return Delete
    },
    Edit() {
      return Edit
    },
    Plus() {
      return Plus
    }
  },
  data() {
    return {
      docQuery: {},
      token: '',
      docs: [],
      total: 0,
      pageNum: 1,
      limit: 10,
      dialogFormVisible: false,
      dialogTitle: '',
      isUpdate: false,
      doc: {},
      depts: [],
    }
  },
  created() {
    this.token = jsCookie.get("token");
    this.getAllDoc();
    this.getAllDept();
  },
  methods: {
    updateCheck() {
      let selectionRows = this.$refs.docsTable.getSelectionRows();
      if (selectionRows.length === 0) {
        // 没有选择任何数据
        ElNotification({
          title: '错误！',
          message: "没有选择任何医生",
          type: 'error',
        });
      } else if (selectionRows.length > 1) {
        ElNotification({
          title: '错误！',
          message: "只能选择一个医生",
          type: 'error',
        });
      } else {
        this.showUpdateDialog(this.$refs.docsTable.getSelectionRows()[0]);
      }
    },
    removeCheck() {
      let selectionRows = this.$refs.docsTable.getSelectionRows();
      if (selectionRows.length === 0) {
        // 没有选择任何数据
        ElNotification({
          title: '错误！',
          message: "没有选择任何医生",
          type: 'error',
        });
      } else {
        ElMessageBox.confirm('确定要删除这' + this.$refs.docsTable.getSelectionRows().length + '个医生？', '友情提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          for (let row of selectionRows) {
            this.removeDoc(row);
          }
        }).catch(() => {
          ElNotification({
            title: '删除取消！',
            message: "删除失败",
            type: 'warning',
          });
        });
      }
    },
    async removeDoc(doc) {
      try {
        const response = await removeDoc(doc.docId);
        if (response.data.code == 200) {
          ElNotification({
            title: '删除成功',
            message: '删除名称为' + doc.docName + "的医生成功！",
            type: 'success',
          });
          this.getAllDoc();
        } else {
          ElNotification({
            title: '删除失败',
            message: response.data.msg,
            type: 'error',
          });
        }
      } catch (e) {
        ElNotification({
          title: '删除失败',
          message: '删除名称为' + doc.docName + "的医生失败!",
          type: 'error',
        });
      }
    },
    async insertDoc() {
      try {
        const response = await addDoc(this.doc);
        if (response.data.code == 200) {
          this.dialogFormVisible = false;
          ElNotification({
            title: '新增成功',
            message: '新增名称为' + this.doc.docName + "的医生成功！",
            type: 'success',
          });
          this.getAllDoc();
        } else {
          ElNotification({
            title: '新增失败',
            message: response.data.msg,
            type: 'error',
          });
        }
      } catch (e) {
        ElNotification({
          title: '新增失败',
          message: '新增名称为' + this.doc.docName + "的医生失败!",
          type: 'error',
        });
      }
    },
    async updateDoc() {
      try {
        const response = await renewDoc(this.doc);
        if (response.data.code == 200) {
          this.dialogFormVisible = false;
          ElNotification({
            title: '修改成功',
            message: '修改名称为' + this.doc.docName + "的医生成功！",
            type: 'success',
          });
          this.getAllDoc();
        } else {
          ElNotification({
            title: '修改失败',
            message: response.data.msg,
            type: 'error',
          });
        }
      } catch (e) {
        ElNotification({
          title: '修改失败',
          message: '修改名称为' + this.doc.docName + "的医生失败!",
          type: 'error',
        });
      }
    },
    showUpdateDialog(oldDoc) {
      this.doc = {};
      this.doc.docId = oldDoc.docId;
      this.doc.docName = oldDoc.docName;
      this.doc.docUsername = oldDoc.docUsername;
      this.doc.docTitle = oldDoc.docTitle;
      this.doc.deptId = oldDoc.deptId;
      this.doc.docInt = oldDoc.docInt;
      this.dialogTitle = '编辑医生';
      this.isUpdate = true;
      this.dialogFormVisible = true;
    },
    showInsertDialog() {
      this.doc = {};
      this.dialogTitle = '新增医生';
      this.isUpdate = false;
      this.dialogFormVisible = true;
    },
    changePage(value) {//更新页码时更新数据
      this.pageNum = value;// 修改页码数据
      // 重新加载数据
      this.getAllDoc();
    },
    fetchDoc() {
      this.getAllDoc();
    },
    resetting() {
      this.docQuery = {};
      this.getAllDoc();
    },
    async getAllDept() {
      const response = await fetchDepartmentList();
      this.depts = response.data.data;
    },
    async getAllDoc() {
      const response = await fetchDocList(this.docQuery.docName, this.pageNum, this.limit);
      this.docs = response.data.data.data;
      this.total = response.data.data.total;
    }
  }
}
</script>

<style scoped>

</style>
